{/* header */}

{a.status} {transitions.map((t) => ( ))}

{/* name + description */}

setName(e.target.value)} aria-label="Automation name" />

setDescription(e.target.value)}
              aria-label="Automation description"
            />
          </div>

{/* one-time webhook secret reveal (after save/regenerate) */}
          {secret && (
            <div className="rounded-md border border-primary/40 bg-primary/5 p-3">
              <p className="mb-1.5 text-xs font-medium text-primary">Copy this webhook secret now — it won't be shown again.</p>
              <div className="flex items-center gap-1.5">
                <code className="min-w-0 flex-1 truncate rounded bg-background px-2 py-1.5 text-xs">{secret.secret}</code>
                <button
                  type="button"
                  className="inline-flex items-center gap-1 rounded-md border px-2 py-1 text-xs"
                  onClick={async () => {
                    try {
                      await navigator.clipboard.writeText(secret.secret);
                      setCopied(true);
                      setTimeout(() => setCopied(false), 2000);
                    } catch {
                      /* clipboard unavailable */
                    }
                  }}
                >
                  {copied ? <Check className="size-3.5" /> : <Copy className="size-3.5" />}
                  {copied ? "Copied" : "Copy"}
                </button>
              </div>
              <p className="mt-1.5 truncate text-xs text-muted-foreground">POST {secret.url}</p>
            </div>
          )}

{/* TRIGGERS */}
          <Section title="Triggers" description="1–3 triggers (OR — the automation fires when any matches).">
            <TriggerEditor
              triggers={triggers}
              onChange={setTriggers}
              workspaceId={ws.id}
              onRegenerateWebhook={() => regenWebhook.mutate()}
              regenerating={regenWebhook.isPending}
            />
          </Section>

{/* CONDITION */}
          <Section title="Condition" description={conditionSummary(condition)}>
            <ConditionEditor draft={condition} onChange={setCondition} />
          </Section>

{/* ACTIONS */}
          <Section title="Actions" description="Ordered (top → bottom), 1–50.">
            <ActionEditor actions={actions} onChange={setActions} />
          </Section>

{/* save + errors */}
          <div className="flex items-center gap-3">
            <button
              type="button"
              data-testid="automation-save"
              className="inline-flex items-center gap-1.5 rounded-md bg-primary px-4 py-2 text-sm font-medium text-white hover:opacity-90 disabled:opacity-50"
              disabled={!dirty || saving}
              onClick={save}
            >
              <Save className="size-4" /> Save changes
            </button>
            {dirty && <span className="text-xs text-muted-foreground">Unsaved changes</span>}
            <span className="flex-1" />
            <button
              type="button"
              className="inline-flex items-center gap-1 rounded-md border border-destructive/40 px-3 py-2 text-sm text-destructive hover:bg-destructive/10"
              onClick={() => {
                if (window.confirm(`Delete “${a.name}”? This archives it (runs are kept).`)) remove.mutate();
              }}
            >
              <Trash2 className="size-4" /> Delete
            </button>
          </div>
          {sectionError && (
            <p className="rounded-md border border-destructive/40 bg-destructive/5 px-3 py-2 text-xs text-destructive">{sectionError}</p>
          )}

{/* RUN HISTORY */}
          <Section title="Run history" description="Latest 50 runs. Click a run to expand its logs.">
            <div data-testid={`automation-runs-${automationId}`}>
              <RunHistory automationId={automationId} />
            </div>
            <p className="mt-2 text-[11px] text-muted-foreground">Latest: {a.latestRun ? runStatusLabel(a.latestRun.status) : "never run"}</p>
          </Section>
        </div>
      )}
    </SettingsShell>
  );
}

/* ------------------------------------------------------------- signature */

/** Stable serialization of the local draft (the dirty-check baseline). */
function localSignature(
  name: string,
  description: string,
  triggers: TriggerDraft[],
  condition: ConditionDraft,
  actions: ActionDraft[]
): string {
  let cond: unknown;
  try {
    cond = conditionPayload(condition).condition;
  } catch {
    cond = condition.json; // invalid JSON → differs from any saved state
  }
  return [
    name.trim(),
    description.trim(),
    JSON.stringify(triggers.map((t) => triggerPayload(t))),
    JSON.stringify(cond),
    JSON.stringify(actions.map((x) => actionPayload(x)))
  ].join("\u0001");
}